import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'

import './App.css';
import Layout from 'antd/lib/layout/layout';
import smu from './smu.svg'
import { Card, Tag, Col, List, Row, Switch } from 'antd';
import { message, Button } from 'antd';
import cap from './svg/cap.svg'
import diff from './svg/diff.svg'
import add from './svg/new.svg'
import nfc from './svg/nfc.svg'
import pic from './pic.png'
import Axios from 'axios';
import { Dto } from './dto';
import { connect } from 'react-redux';
import { bindActionCreators, Dispatch } from 'redux';
import { RootState } from './combineReducers';
import * as Action from './appreducer'


const style = { background: '#0092ff', padding: '8px 0', height: '30px' };


const { Header, Content, Footer } = Layout
interface CapProps {
  change: typeof Action.change
  state: Action.CapState
}
const _App: React.SFC<CapProps> = props => {

  const { state, change } = props

  const [enableFetch, setEnableFetch] = useState(false)

  const msg = (icon: string, content: string) => {
    message.success({
      content,
      className: 'custom-class',
      icon: (<img src={icon} alt={''} style={{ height: '3em', marginRight: '1em' }} />),
      style: {
        fontSize: '2em'
      },
    });
  }
  useEffect(() => {
    if (state.msg) {
      switch (state.msg) {
        // case 'add':
        //   msg(add, `${state.currentItem?.name} 已识别`)
        //   break;
        case 'nfc':
          msg(nfc, `${state.currentItem?.name} 已存入标签`)
          break;
        case 'diff':
          msg(diff, `${state.currentItem?.name} 已放入导轨`)
          break;
        case 'cap':
          msg(cap, `${state.currentItem?.name} 已入库`)
          break;
      }

    }
  }, [state.msg])
  useEffect(() => {
    const x = setInterval(() => {
      if (enableFetch) {
        change()
      }
    }, 1000)
    return () => clearInterval(x)
  }, [change, enableFetch])

  const click = () => msg(cap, '已入库')
  const dgstyle = { height: 'calc( 100% - 1em )', margin: '0.5em' };
  return (
    <Layout className="layout">
      <Header style={{ display: "flex", alignItems: "center", backgroundColor: "white", height: "10vh" }}>

        <div style={{ fontSize: "2em", color: "darkblue" }}>
          智能机器人仓储实训平台
        </div>
        <div style={{ backgroundColor: "darkblue", width: "2px", height: "3em", margin: "1em" }} />
        <img src={smu} alt={"smu"} style={{ width: '15em', }} />
        <div style={{ flexGrow: 1 }}></div>
        <List

          grid={{ gutter: 16, column: 4 }}
          dataSource={[
            { "color": "Green", "name": "Green", "count": 12 },
            { "color": "#55acee", "name": "Blue", "count": 9 },
            { "color": "#000000", "name": "Black", "count": 51 },
            { "color": "grey", "name": "White", "count": 23 },
          ]}
          renderItem={item => (
            <List.Item style={{ marginBottom: '0', height: '100%' }}>
              <div >
                <Tag style={{ width: "7em", textAlign: "center", fontSize: '1.5em', height: '2em', display: 'flex', alignItems: 'center', justifyContent: 'center' }} color={item.color}>
                  <div>{item.name}: {item.count}</div>
                </Tag>
              </div>
            </List.Item>
          )}
        />
        <Switch checkedChildren="轮询开" unCheckedChildren="轮询关" onChange={e => setEnableFetch(e)} checked={enableFetch} />
      </Header>
      <Content style={{ padding: '2em', height: "90vh" }}>
        <Row gutter={[1, 2]} style={{ height: "100%" }}>
          <Col span={10} >
            <div style={{ display: 'flex', height: '100%', alignItems: 'center', background: 'white' }}>
              <div style={{ height: '75%', width: "100%", textAlign: 'center' }}>
                <img src={pic} alt={'图片'} style={{ height: '100%', maxWidth: '100%' }} />
              </div>
            </div>
          </Col>
          <Col
            span={14}
            // style={{ background: "white" }}
            onClick={click}>
            <Row style={{ height: '50%' }}>
              <Col span={12}>
                <Card style={dgstyle} title={(<div style={{ fontSize: '2em' }}>
                  <span style={{ color: '#7d07f2' }}>❶</span>
                  导轨1
                </div>)}>
                  <List
                    dataSource={state.items.filter(e => e.lacation === '-1')}
                    renderItem={(item, index) => {
                      return (
                        <List.Item>
                          <div style={{ fontSize: '2em' }}>
                            {item.name}
                          </div>
                        </List.Item>
                      )
                    }}

                  />
                </Card>
              </Col>
              <Col span={12}>
                <Card style={dgstyle} title={(<div style={{ fontSize: '2em' }}>
                  <span style={{ color: '#7d07f2' }}>❷</span>
                  导轨2
                </div>)}>
                </Card>
              </Col>
            </Row>
            <Row style={{ height: '50%', margin: '1em' }}>
              <Col span={24} style={{ height: '100%' }}>
                <Card title={(<div style={{ fontSize: '2em' }}>
                  <span style={{ color: '#7d07f2' }}>❸</span>
                  仓库
                </div>)} style={{ height: 'calc( 100% - 2em )' }} >
                  <Row gutter={[16, 16]}>
                    <Col id="1" span={8}><div style={style}></div></Col>
                    <Col id="2" span={8}><div style={style}></div></Col>
                    <Col id="3" span={8}><div style={style}></div></Col>
                  </Row>
                  <Row gutter={[16, 16]}>
                    <Col id="4" span={8}><div style={style}></div></Col>
                    <Col id="5" span={8}><div style={style}></div></Col>
                    <Col id="6" span={8}><div style={style}></div></Col>
                  </Row>
                  <Row gutter={[16, 16]}>
                    <Col id="7" span={8}><div style={style}></div></Col>
                    <Col id="8" span={8}><div style={style}></div></Col>
                    <Col id="9" span={8}><div style={style}></div></Col>
                  </Row>

                </Card>
              </Col>
            </Row>

          </Col>
        </Row>
      </Content>
    </Layout>
  );
}
const mapStateToProps = (state: RootState) => ({
  state: state.CapReducer,
})

const mapDispatchToProps = (dispatch: Dispatch) =>
  bindActionCreators({
    change: Action.change,
  }, dispatch)

/**
* 得到当前过滤器并渲染 Link。
*/
const App = connect(
  mapStateToProps,
  mapDispatchToProps
)(_App)

export default App;
